import * as React from 'react';
import * as moment from 'moment';
import MonthCalendar from 'rc-calendar/lib/MonthCalendar';
import RcDatePicker from 'rc-calendar/lib/Picker';
import classNames from 'classnames';
import omit from 'omit.js';
import Icon from '../icon';
import warning from '../_util/warning';
import callMoment from '../_util/callMoment';
export default function createPicker(TheCalendar) {
    var _a;
    return _a = class CalenderWrapper extends React.Component {
            constructor(props) {
                super(props);
                this.renderFooter = (...args) => {
                    const { prefixCls, renderExtraFooter } = this.props;
                    return renderExtraFooter ? (<div className={`${prefixCls}-footer-extra`}>
          {renderExtraFooter(...args)}
        </div>) : null;
                };
                this.clearSelection = (e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    this.handleChange(null);
                };
                this.handleChange = (value) => {
                    const props = this.props;
                    if (!('value' in props)) {
                        this.setState({ value });
                    }
                    props.onChange(value, (value && value.format(props.format)) || '');
                };
                this.saveInput = (node) => {
                    this.input = node;
                };
                const value = props.value || props.defaultValue;
                if (value && !moment.isMoment(value)) {
                    throw new Error('The value/defaultValue of DatePicker or MonthPicker must be ' +
                        'a moment object after `antd@2.0`, see: https://u.ant.design/date-picker-value');
                }
                this.state = {
                    value,
                };
            }
            componentWillReceiveProps(nextProps) {
                if ('value' in nextProps) {
                    this.setState({
                        value: nextProps.value,
                    });
                }
            }
            focus() {
                this.input.focus();
            }
            blur() {
                this.input.blur();
            }
            render() {
                const { value } = this.state;
                const props = omit(this.props, ['onChange']);
                const { prefixCls, locale, localeCode } = props;
                const placeholder = ('placeholder' in props)
                    ? props.placeholder : locale.lang.placeholder;
                const disabledTime = props.showTime ? props.disabledTime : null;
                const calendarClassName = classNames({
                    [`${prefixCls}-time`]: props.showTime,
                    [`${prefixCls}-month`]: MonthCalendar === TheCalendar,
                });
                let pickerProps = {};
                let calendarProps = {};
                if (props.showTime) {
                    calendarProps = {
                        // fix https://github.com/wmstool-design/wmstool-design/issues/1902
                        onSelect: this.handleChange,
                    };
                }
                else {
                    pickerProps = {
                        onChange: this.handleChange,
                    };
                }
                if ('mode' in props) {
                    calendarProps.mode = props.mode;
                }
                warning(!('onOK' in props), 'It should be `DatePicker[onOk]` or `MonthPicker[onOk]`, instead of `onOK`!');
                const calendar = (<TheCalendar {...calendarProps} disabledDate={props.disabledDate} disabledTime={disabledTime} locale={locale.lang} timePicker={props.timePicker} defaultValue={props.defaultPickerValue || callMoment(moment)} dateInputPlaceholder={placeholder} prefixCls={prefixCls} className={calendarClassName} onOk={props.onOk} dateRender={props.dateRender} format={props.format} showToday={props.showToday} monthCellContentRender={props.monthCellContentRender} renderFooter={this.renderFooter} onPanelChange={props.onPanelChange}/>);
                const clearIcon = (!props.disabled && props.allowClear && value) ? (<Icon type="cross-circle" className={`${prefixCls}-picker-clear`} onClick={this.clearSelection}/>) : null;
                const input = ({ value: inputValue }) => (<div>
          <input ref={this.saveInput} disabled={props.disabled} readOnly value={(inputValue && inputValue.format(props.format)) || ''} placeholder={placeholder} className={props.pickerInputClass}/>
          {clearIcon}
          <span className={`${prefixCls}-picker-icon`}/>
        </div>);
                const pickerValue = value;
                if (pickerValue && localeCode) {
                    pickerValue.locale(localeCode);
                }
                return (<span className={classNames(props.className, props.pickerClass)} style={props.style} onFocus={props.onFocus} onBlur={props.onBlur}>
          <RcDatePicker {...props} {...pickerProps} calendar={calendar} value={pickerValue} prefixCls={`${prefixCls}-picker-container`} style={props.popupStyle}>
            {input}
          </RcDatePicker>
        </span>);
            }
        },
        _a.defaultProps = {
            prefixCls: 'wmstool-calendar',
            allowClear: true,
            showToday: true,
        },
        _a;
}
